<template>
  <div class="refine_changepwd">
    <h2 class="titleblue">修改密码</h2>

    <el-form ref="form" :model="form" label-width="80px">
      <div class="contant">
        <el-input v-model="form.oldpwd" type="password" placeholder="请输入旧密码" class="oldpwd" maxlength="12"></el-input>
        <el-input v-model="form.newpwd" type="password" placeholder="请输入新密码" class="newpwd" maxlength="12"></el-input>
        <div class="input_span">
          <label style="color: #666;">强度:</label>
          <span id="one"></span>
          <span id="two"></span>
          <span id="three"></span>
        </div>
        <el-input v-model="form.compwd" type="password" placeholder="确认新密码" class="compwd" maxlength="12"></el-input>
        <el-button type="primary" @click="onSubmit" class="surebtn">提 交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import accountService from '@/services/AccountService'

  export default {
    data: function () {
      return {
        form: {
          newpwd: '',
          compwd: '',
          oldpwd: "",
        }
      };
    },
      watch: {
          'form.newpwd' (newname, oldname) {
              this.msgText = this.checkStrong(newname);
              if (this.msgText > 1 || this.msgText == 1) {
                  document.getElementById('one').style.background = 'red';
                  this.passwordSt = '弱'
              } else {
                  document.getElementById('one').style.background = '#eee';
                  this.passwordSt = '空'
              }
              if (this.msgText > 4 || this.msgText == 4) {
                  document.getElementById('two').style.background = 'orange';
                  this.passwordSt = '一般'
              } else {
                  document.getElementById('two').style.background = '#eee';
                  this.passwordSt = '空'
              }
              if (this.msgText == 5) {
                  document.getElementById('three').style.background = '#00D1B2';
                  this.passwordSt = '强'
              } else {
                  document.getElementById('three').style.background = '#eee';
                  this.passwordSt = '空'
              }
          }
      },
    methods: {
        checkStrong(sValue) {
            var modes = 0;
            var str = sValue
            if (sValue.indexOf(' ') >= 0) {
                str = sValue.substring(0, sValue.indexOf(' '));
                this.form.newpwd = str;
            }
            //正则表达式验证符合要求的
            if (str.length < 1) return modes;
            if (/\d/.test(str)) modes++; //数字
            if (/[a-z]/.test(str)) modes++; //小写
            if (/[A-Z]/.test(str)) modes++; //大写
            if (/\W/.test(str)) modes++; //特殊字符
            //逻辑处理
            if (sValue.length >= 8 && modes > 1) {
                modes++
            }
            return modes;
        },
      onSubmit() {
        if (this.form.oldpwd == '') {
          this.$alert('请输入旧密码', '提示')
        } else if (this.form.newpwd == '') {
          this.$alert('请输入新密码', '提示')
        } else if (this.form.compwd == '') {
          this.$alert('请再次输入新密码', '提示')
        } else if (this.form.compwd != this.form.newpwd) {
          this.$alert('两次输入新密码不一致')
        } else if (this.msgText != 5) {
            this.$alert('密码必须包含大小写字母+数字+特殊字符')
        } else {
          accountService.changePassword(this.form.oldpwd, this.form.newpwd).then(res => {
            this.$alert("密码重置成功", "提示").then(() => {
              this.$router.push('/login')
            })
          })
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .refine_changepwd {
    width: 100%;
    display: inline-block;

    .user-title {
      width: 100%;
      display: inline-block;
    }

    .contant {
      width: 400px;
      height: 250px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-around;
    }
  }

  .input_span span {
    display: inline-block;
    width: 85px;
    height: 10px;
    background: #eee;
    line-height: 20px;
  }

  #one {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 0px solid;
    margin-left: 20px;
    margin-right: 3px;
  }

  #two {
    border-left: 0px solid;
    border-right: 0px solid;
    margin-left: -5px;
    margin-right: 3px;
  }

  #three {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0px solid;
    margin-left: -5px;
  }
  #font span:nth-child(1) {
    color: red;
    margin-left: 80px;
  }
  #font span:nth-child(2) {
    color: orange;
    margin: 0 60px;
  }
  #font span:nth-child(3) {
    color: #00d1b2;
  }
</style>
